<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <span class="demonstration">直播状态:</span>
        <el-cascader
          placeholder="请选择"
          :options="options"
          value="默认"
          @change="filtertype"
        />
      </div>

      <div class="header-right">
        <span class="sub-title">经纪人搜索:</span>
        <el-autocomplete
          v-model="value1"
          clearable
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          class="inline-input search"
          placeholder="姓名 ID"
          @change="handleSelect"
        />
      </div>
    </div>

    <div class="headertop">
      <h5>全部直播</h5>
    </div>

    <div class="main">
      <div class="main-video">
        <dl v-for="(item, index) in filterList" :key="index">
          <dt>
            <img :src="item.img" />
          </dt>
          <dd>
            <p>{{ item.title }}</p>
            <p>
              <span>{{ item.name }}</span> <span>{{ item.timer }}</span>
            </p>
            <p>
              <span @click="Router.push('/StreamingDetail')">进入直播</span>
              <span>{{ item.type }}</span>
            </p>
          </dd>
        </dl>
      </div>

      <!-- <div class="footer">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const state = reactive({
      options: [
        {
          value: "",
          label: "默认",
          ind: 0,
        },
        {
          value: "B",
          label: "直播中",
          ind: 1,
        },
        {
          value: "C",
          label: "已结束",
          ind: 2,
        },
      ],
      value: "",
      list: [
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgres.qi58.com%2Fqi58%2F12%2F58974-202003201514395e746d5f3c297.jpg&refer=http%3A%2F%2Fimgres.qi58.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637997031&t=f9d27e2efdac982a35ed052b0b3acd2f",
          name: "昂桑",
          type: "已开播",
          id: "C",
          title: "榜一连夜扛着火车跑路",
          timer: new Date().toLocaleString(),
        },
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F08%2F20171008150523_P5wUc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638003209&t=ef0e5c711ba04f876d6d20c21da74112",
          name: "Hide on bush",
          timer: new Date().toLocaleString(),
          title: "躲进草丛里",
          type: "已开播",
          id: "B",
        },
        {
          img: "https://img0.baidu.com/it/u=3191170209,1373119164&fm=26&fmt=auto",
          name: "hanzo",
          timer: new Date().toLocaleString(),
          title: "这里所有的一切曾经都属于我",
          type: "已开播",
          id: "B",
        },
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e89c57f8a638a84a0d304fe702b0.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638014961&t=b0a8f3e637d64c6eec30ec8beaded23d",
          name: "GenJI",
          timer: new Date().toLocaleString(),
          type: "未开播",
          title: "我年轻时在这里虚度了许多时光",
          id: "C",
        },
        {
          img: "",
          name: "clearLove",
          timer: new Date().toLocaleString(),
          type: "未开播",
          title: "玩什么游戏不如回家养猪",
          id: "C",
        },
        {
          img: "https://img1.baidu.com/it/u=734196515,4111783701&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=366",

          name: "Faker",
          timer: new Date().toLocaleString(),
          type: "已开播",
          title: "苦酒入喉,心作痛",
          id: "B",
        },
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-a54b20d6a8e33939ac7272f082869e3f_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637492924&t=5a2aef36ff9476b05e8927ad8374c878",
          name: "White",
          timer: new Date().toLocaleString(),
          type: "未开播",
          title: "撒娇的卡拉三等奖阿卡老实交代",
          id: "C",
        },
        {
          img: "https://img1.baidu.com/it/u=652496285,1182644904&fm=26&fmt=auto",
          name: "五五开",
          timer: new Date().toLocaleString(),
          type: "已开播",
          title: "我和Faker五五开",
          id: "B",
        },
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-a54b20d6a8e33939ac7272f082869e3f_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637492924&t=5a2aef36ff9476b05e8927ad8374c878",
          name: "铁锅炖大鹅",
          timer: new Date().toLocaleString(),
          type: "未开播",
          title: "撒娇的卡拉三等奖阿卡老实交代",
          id: "C",
        },
      ],
      filterList: <any>[],
    });
    const restaurants: any = ref([]);
    state.filterList = state.list;
    const Router = useRouter();

    const querySearch = (queryString: string, cb: any) => {
      const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value;
      // call callback function to return suggestions
      console.log(queryString);

      cb(results);
    };
    const createFilter = (queryString: any) => {
      return (restaurant: any) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    };
    const loadAll = () => {
      return [
        { value: "昂桑", link: "https://github.com/vuejs/vue" },
        { value: "hanzo", link: "https://github.com/ElemeFE/element" },
        { value: "Faker", link: "https://github.com/ElemeFE/cooking" },
        { value: "White", link: "https://github.com/ElemeFE/mint-ui" },
        { value: "clearLove", link: "https://github.com/vuejs/vuex" },
        { value: "五五开", link: "https://github.com/vuejs/vue-router" },
        { value: "铁锅炖大鹅", link: "https://github.com/babel/babel" },
      ];
    };

    const filtertype = (value: any) => {
      console.log(value);

      state.filterList = state.list.filter((item: any, index) => {
        return item.id.includes(value);
      });
    };

    const handleSelect = (value: any) => {
      console.log(value);

      state.filterList = state.list.filter((item: any, index) => {
        return item.name.includes(value);
      });
    };
    onMounted(() => {
      restaurants.value = loadAll();
    });

    return {
      ...toRefs(state),
      value1: ref(""),
      handleSelect,
      querySearch,
      loadAll,
      filtertype,
      Router,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 10px 13px;

  background: #fff;
  .header {
    width: 100%;
    display: flex;
  }
  .header-left {
    margin-right: 16px;
  }
  .header-right {
    .sub-title {
      margin-right: 10px;
    }
  }
  .headertop {
    margin: 26px 0 10px 0;
  }
  .demonstration {
    letter-spacing: 2px;
    margin-right: 10px;
  }
  .sub-title {
    letter-spacing: 2px;
  }
  .main {
    width: 100%;
    height: auto;
  }

  .main-video {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;

    dl {
      width: calc(100% / 6);
      height: calc(100% / 2);
      padding: 0 10px 10px 0;

      dt {
        width: 100%;
        height: 190px;
        border: 1px solid #cccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        font-size: 12px;

        p {
          line-height: 30px;
        }
        p:nth-of-type(1) {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        p:nth-of-type(2) {
          display: flex;
          flex-wrap: nowrap;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          align-items: center;
          justify-content: space-between;
          span:nth-of-type(1) {
            /* color: skyblue; */
            flex-shrink: 0;
          }

          span:nth-of-type(2) {
            color: tomato;

            flex-shrink: 0;
          }
        }

        p:nth-of-type(3) {
          span:nth-of-type(1) {
            color: skyblue;
          }

          span:nth-of-type(2) {
            color: tomato;
            margin-left: 50px;
          }
        }
      }
    }
  }
}
</style>